<script setup lang="ts">
import {reactive, ref} from "vue";
import {addCategory, deleteCategoryById, getCategoryList, update, updateCategory} from "@/api/category";
import {ElMessage, ElNotification} from "element-plus";

defineOptions({
  name: "Category"
});

const form = reactive({
  name: ""
});
const formRef = ref();
const dataList = ref([]);
const loading = ref(true);
const editDialog = ref(false);
const categoryInfo = ref({});
const addDialog = ref(false);
const aciton = ref(import.meta.env.VITE_APP_BASE_URL + "/category/upload");

async function onSearch() {
  loading.value = true;
  getCategoryList({current: dataList.value.current, name: form.name}).then(res => {
    console.log(res.data);
    dataList.value = res.data.data;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  })
}

const handleChangeCurrent = (val: any) => {
  dataList.value.current = val;
  onSearch();
}
const deleteCategory = (data?: any) => {
  deleteCategoryById(data).then(res => {
    ElMessage({
      message: res.data.msg,
      type: 'success'
    })
  }).catch(res => {
    ElMessage({
      message: res.data.msg,
      type: 'error'
    })
  })
}
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};
const updateState = (id: any, state: any) => {
  update({id: id, isShow: state}).then(res => {
    ElNotification({
      title: '分类状态',
      message: res.data.msg,
      type: 'success',
    })
  })
}
const edit = (data?: any) => {
  updateCategory({id: categoryInfo.value.id, name: categoryInfo.value.name}).then(res => {
    ElNotification({
      title: '分类状态',
      message: res.data.msg,
      type: 'success',
    })
  }).catch(res => {
    ElNotification({
      title: '分类状态',
      message: res.data.msg,
      type: 'error',
    })
  })
}
const handleSuccess = (res: any, uploadFile: any, uploadFiles: any) => {
  categoryInfo.value.iconUrl = res.data;
  uploadFile.url = res.data;
  console.log(res.data);
}

const add = () => {
  console.log(categoryInfo.value.iconUrl)
  addCategory({name: categoryInfo.value.name, iconUrl: categoryInfo.value.iconUrl})
}
onSearch();
</script>

<template>
  <div class="main">
    <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="商品名称：" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请输入商品名称"
            clearable
            class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            :loading="loading"
            @click="onSearch"
        >
          搜索
        </el-button>
        <el-button @click="resetForm(formRef)">
          重置
        </el-button>
        <el-button @click="addDialog=true">
          添加
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList.records" table-layout="fixed">
      <el-table-column prop="id" label="ID"/>
      <el-table-column label="分类图">
        <template #default="scope">
          <el-image :src="scope.row.iconUrl" error="图片失效"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="分类名"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="stock" label="库存"/>
      <el-table-column prop="created" label="添加时间"/>
      <el-table-column prop="updated" label="最后更新"/>
      <el-table-column label="快速操作">
        <template #default="scope">
          显示
          <el-switch :loading="loading" v-model="scope.row.isShow"
                     @change="updateState(scope.row.id,scope.row.isShow)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary"
                     @click="editDialog = true;categoryInfo.name=scope.row.name;categoryInfo.iconUrl = scope.row.iconUrl;categoryInfo.id = scope.row.id">
            编辑
          </el-button>
          <el-button type="warning" @click="deleteCategory(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%">
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="dataList.total"
          :page-size="dataList.size"
          @current-change="handleChangeCurrent"
      />
    </div>
  </div>
  <!--  修改分类-->
  <el-dialog
      v-model="editDialog"
      title="修改分类"
      width="500"
      align-center
  >
    分类名：
    <el-input v-model="categoryInfo.name"></el-input>
    分类图：
    <el-image :src="categoryInfo.iconUrl"></el-image>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">取消</el-button>
        <el-button type="primary" @click="edit();editDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  添加分类-->
  <el-dialog
      v-model="addDialog"
      title="添加分类"
      width="500"
      align-center
  >
    分类名：
    <el-input v-model="categoryInfo.name"></el-input>
    分类图：
<!--    <Upload :pics="pics" v-model="categoryInfo.iconUrl"></Upload>-->
    <el-upload :action="aciton" name="pics" multiple
               list-type="picture-card" :on-success="handleSuccess" limit="1"></el-upload>
    <!--    <el-image :src="categoryInfo.iconUrl"></el-image>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="add();addDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>